<template>
	<view class="my-search-container" >
		<view class="my-search-box">
			<image class="icon" src="@/static/images/search.png"></image>
			<text class="placeholder">{{ placeholderText }}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name:"my-search",
		props: {
		    // placeholder
		    placeholderText: {
		      type: String,
		      default: '搜索'
		    },
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
.my-search-container{
	display: flex;
	align-items: center;//交叉轴中居中展示
	.my-search-box{
		height: 36px;
		background-color: $uni-bg-color;
		border-radius: 15px;
		border: 1px solid #c9c9c9;
		width: 100%;
		display: flex;
		align-items: center;
		padding: 0 10px;
		.icon {
			width: 20px;
			height: 20px;
		}
		.placeholder{
			font-size: 12px;
			margin-left: 5px;
			color: #999;
		}
	}
}
</style>